<template>
  <view class="container">
    <!-- 赛事列表 -->
    <view class="match-list">
      <!-- 赛事卡片 -->
      <view class="match-card">
        <view class="header">
          <view class="profile">
            <image class="avatar" src="/static/logo.png"></image>
            <view class="info">
              <text class="name">{{ match.title }}</text>
              <text class="time"
                >{{ match.postDate }} {{ match.userName }}</text
              >
            </view>
          </view>
        </view>

        <view class="match-content">
          <view class="title-wrapper">
            <text class="match-title">
              {{ match.content }}
            </text>
          </view>
          <view class="match-banner" v-if="match.videoUrl">
            <video
              class="video-player"
              :src="match.videoUrl"
              object-fit="cover"
              show-play-btn
              controls
            ></video>
          </view>

          <view class="match-stats">
            <view class="views">
              <uni-icons type="eye" size="28rpx" color="#666"></uni-icons>
              <text>{{ match.views }}</text>
            </view>
            <view class="actions">
              <view class="comment">
                <uni-icons type="chat" size="28rpx" color="#3db657"></uni-icons>
                <text>{{ match.comments.length || 0 }}</text>
              </view>
              <view class="like" @click="createLike(match)">
                <uni-icons
                  :type="match.likeStatus === 1 ? 'heart-filled' : 'heart'"
                  size="28rpx"
                  :color="match.likeStatus === 1 ? '#ff0000' : '#3db657'"
                ></uni-icons>
                <text
                  :style="{
                    color: match.likeStatus === 1 ? '#ff0000' : '#3db657',
                  }"
                >
                  {{ match.likes || 0 }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 评论列表 -->
    <view class="comments-section">
      <view class="comments-header">
        <text class="comments-title"
          >评论({{ match.comments.length || 0 }})</text
        >
      </view>

      <view class="comments-list">
        <view
          v-for="(comment, index) in match.comments"
          :key="index"
          class="comment-item"
        >
          <view class="comment-header">
            <image
              class="comment-avatar"
              :src="comment.avator || '/static/logo.png'"
            ></image>
            <view class="comment-info">
              <text class="comment-username">{{ comment.userName }}</text>
              <text class="comment-time">{{ comment.postDate }}</text>
            </view>
          </view>

          <view class="comment-content">
            <text>{{ comment.content }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部评论输入框 -->
    <view class="comment-input-wrapper">
      <view class="comment-input-box">
        <input
          type="text"
          v-model="commentText"
          placeholder="我来说两句..."
          class="comment-input"
        />
      </view>
      <view class="comment-actions-box">
        <button class="submit-btn" @click="submitComment">发布</button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getDiscussionList,
  creatlikes,
  getDiscussion,
  creatcomments,
} from '@/api/system/index';
import config from '@/config'
export default {
  data() {
    return {
      match: {
        comments: [], // 评论列表
      },
      commentText: '', // 评论输入内容,
      id: '',
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getDiscussionList();
  },
  methods: {
    createLike(match) {
      // if (match.likeStatus === 1) {
      //   uni.showToast({
      //     title: '已经点赞过了',
      //     icon: 'none',
      //   });
      //   return;
      // }

      creatlikes({
        discussionId: match.id,
      }).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: '点赞成功',
          });
          this.getDiscussionList();
        }
      });
    },
    async getDiscussionList() {
      // this.match = uni.getStorageSync('match');
      getDiscussion(this.id).then((res) => {
        console.log(res.data);
        this.match = res.data;
        // 处理评论数据的格式
        if (this.match.comments) {
          this.match.comments = this.match.comments.map((comment) => ({
            id: comment.id,
            userName: comment.userName,
            content: comment.commentText,
            postDate: comment.commentDate,
            userId: comment.userId,
            discussionId: comment.discussionId,
            avator: config.baseUrl+ comment.avator, // 默认头像
          }));
        }
      });
    },

    // 发布评论
    async submitComment() {
      if (!this.commentText.trim()) {
        return;
      }

      console.log(this.$store.getters.name);
      let name = this.$store.getters.name;
      // TODO: 调用发布评论接口
      let obj = {
        discussionId: this.id,
        userName: name,
        commentText: this.commentText,
      };
      creatcomments(obj).then((res) => {
        this.commentText = '';
        this.getDiscussionList();
      });
      // 清空输入框
    },
  },
};
</script>

<style>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.match-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.profile {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.time {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}

.follow-btn {
  background: #3db657;
  color: #fff;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  border: none;
}

.match-content {
  width: 100%;
}

.title-wrapper {
  position: relative;
  margin-bottom: 16rpx;
}

.match-title {
  font-size: 32rpx;
  color: #333;
  line-height: 1.4;
}

.text-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.expand-btn {
  color: #3db657;
  font-size: 28rpx;
  padding: 10rpx 0;
  /* display: inline-block; */
  float: right;
  margin-top: 10rpx;
}

.match-banner {
  position: relative;
  width: 100%;
  border-radius: 12rpx;
  overflow: hidden;
  margin: 16rpx 0;
}

.video-player {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
}

.status {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  background: rgba(61, 182, 87, 0.9);
  color: #fff;
  padding: 6rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.match-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  color: #666;
  font-size: 28rpx;
}

.views {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.actions {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.comment,
.like {
  display: flex;
  align-items: center;
  gap: 6rpx;
  color: #3db657;
}

/* 调整图标与文字的对齐方式 */
.uni-icons {
  display: flex;
  align-items: center;
}

.comments-section {
  margin-top: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
}

.comments-header {
  margin-bottom: 20rpx;
}

.comments-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.comment-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.comment-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.comment-info {
  flex: 1;
}

.comment-username {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.comment-time {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.comment-actions {
  padding: 0 10rpx;
}

.comment-content {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin: 10rpx 0;
  padding-left: 80rpx;
}

.comment-footer {
  padding-left: 80rpx;
  margin-top: 16rpx;
}

.interaction-stats {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30rpx;
}

.comment-replies,
.comment-likes {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #666;
  font-size: 26rpx;
}

.comment-likes {
  color: #3db657;
}

/* 底部评论输入框样式 */
.comment-input-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 30rpx 20rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.comment-input-box {
  flex: 1;
  margin-right: 20rpx;
}

.comment-input {
  background: #f5f5f5;
  border-radius: 36rpx;
  padding: 24rpx 30rpx;
  font-size: 28rpx;
  height: 72rpx;
  line-height: 72rpx;
}

.comment-actions-box {
  display: flex;
  align-items: center;
}

.submit-btn {
  background: #3db657;
  color: #fff;
  font-size: 28rpx;
  padding: 0 40rpx;
  height: 72rpx;
  line-height: 72rpx;
  border-radius: 36rpx;
  border: none;
  margin: 0;
}

/* 按钮点击态 */
.submit-btn:active {
  background: #35a04c;
}

/* 去除按钮默认样式 */
button::after {
  border: none;
}
</style>
